<template>
    <div class="homepage">
      <div class="row">
        <div class="col">
          <div class="area1">
            <ul>
              <li><a href="#home">待办事项</a></li>
            </ul>
            <!-- 第一行第一列区域 -->
            <el-table :data="tableData" height="250" border style="width: 100%">
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="类型" width="180">
              </el-table-column>
              <el-table-column prop="address" label="名称"> </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="col">
          <div class="area2">
            <!-- 第一行第二列区域 -->
            <ul>
              <li><a href="#home">公告</a></li>
            </ul>
            <h2></h2>
            <p>鸣志成功收购美国LIN ENGINERING公司</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="area3">
            <ul>
              <li><a href="#home">缺项状态分布</a></li>
              <li><a href="#news">最近一个月</a></li>
            </ul>
            <!-- 第二行第一列区域 -->
            <div id="myChart1" :style="{ width: '600px', height: '300px' }"></div>
            <h2></h2>
            <p></p>
          </div>
        </div>
        <div class="col">
          <div class="area4">
            <ul>
              <li><a href="#home">工单状态情况</a></li>
              <li><a href="#news">最近一个月</a></li>
            </ul>
            <!-- 第二行第二列区域 -->
            <div id="myChart2" :style="{ width: '600px', height: '300px' }"></div>
            <h2></h2>
            <p></p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <style>
  .row {
    display: flex;
  }
  
  .col {
    flex: 1;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover {
    background-color: #111;
  }
  
  .area1,
  .area2 {
    border: 1px solid #000;
    padding: 0;
    margin: 10px;
    width: 600px;
    height: 300px;
  }
  .area3,
  .area4 {
    border: 1px solid #000;
    padding: 0;
    margin: 10px;
    width: 600px;
    height: 400px;
  }
  </style>
  
  <script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: "2023-05-03",
            name: "代审核缺陷",
            address: "蓄电池系统",
          },
          {
            date: "2023-05-02",
            name: "代审核缺陷",
            address: "蓄电池系统",
          },
          {
            date: "2023-05-04",
            name: "代审核缺陷",
            address: "制粉",
          },
          {
            date: "2023-05-01",
            name: "代审核工单",
            address: "编号4987",
          },
          {
            date: "2023-05-08",
            name: "代审核工单",
            address: "编号98672",
          },
          {
            date: "2023-05-06",
            name: "代审核工单",
            address: "蓄电池系统",
          },
          {
            date: "2023-05-07",
            name: "代审核工单",
            address: "蓄电池系统",
          },
        ],
      };
    },
    name: "PageHome",
  
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
        let myChart1 = this.$echarts.init(document.getElementById("myChart1"));
        let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
        // 绘制图表
        myChart1.setOption({
          series: [
            {
              type: "pie",
              data: [
                {
                  value: 335,
                  name: "待提交",
                },
                {
                  value: 234,
                  name: "待确认",
                },
                {
                  value: 1548,
                  name: "待审核",
                },
              ],
            },
          ],
  
          legend: {
            //图例  标注各种颜色代表的模块
            orient: "vertical", //图例的显示方式  默认横向显示
            bottom: 0, //控制图例出现的距离  默认左上角
            left: "left", //控制图例的位置
            itemWidth: 16, //图例颜色块的宽度和高度
            itemHeight: 12,
            textStyle: {
              //图例中文字的样式
              color: "#000",
              fontSize: 16,
            },
  
            // title: { text: '太阳系八大行星的卫星数量' },
            // tooltip: {},
            // xAxis: {
            //     data: ["水星","金星","地球","火星","木星","土星","金王星","海王星"]
            // },
            // yAxis: {},
            // series: [{
            //     name: '数量',
            //     type: 'bar',
            //     data: [0, 0, 1, 2, 79, 82, 27, 14]
            // }]
          },
        });
  
        myChart2.setOption({
          tooltip: {},
          xAxis: {
            data: ["待提交", "待确认", "待审核"],
          },
          yAxis: {},
          series: [
            {
              name: "数量",
              type: "bar",
              data: [50, 100, 120],
            },
          ],
        });
      },
    },
  };
  </script>